<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>调色画板</title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid red;" width="500" height="400"></canvas>
		<button id="button">清除画面</button>
		<script type="text/javascript">
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				var canvasx = canvas.getBoundingClientRect().left;
				var canvasy = canvas.getBoundingClientRect().top;
				airboard();

				function airboard() {
					for(var i = 0; i < 5; i++) {
						for(var j = 0; j < 6; j++) {
							cxt.fillStyle = "rgb(" + (255 - 30 * i) + "," + (255 - 30 * j) + ",200)";
							cxt.fillRect(25 * i, 25 * j, 25, 25);
						}
					}
				}
				document.onclick = function(e) { //选取颜色
					//					console.log(e.clientX+",",e.clientY);
					//					console.log(e.offsetX+",",e.offsetY);
					for(var i = 0; i < 5; i++) {
						for(var j = 0; j < 6; j++) {
							if(e.offsetX >= 25 * i && e.offsetX <= 25 * i+25 && e.offsetY >= 25 * j && e.offsetY <= 25 * j+25) {
								console.log(e.offsetX + "," + e.offsetY);
								console.log(i + "," + j);
								cxt.strokeStyle = "rgb(" + (255 - 30 * i) + "," + (255 - 30 * j) + ",200)";
							}
						}
					}
				}
				console.log(canvasx);
				console.log(canvasy);
				canvas.addEventListener('mousedown', downfun);
				canvas.addEventListener('mousemove', movefun);
				canvas.addEventListener('mouseup', upfun);
				var startx;
				var starty;
				var endx;
				var endy;
				var offon = false;
				cxt.lineWidth = 5;
				cxt.lineCap = 'square'

				function downfun(e) {
					offon = true;
					startx = e.clientX - canvasx;
					starty = e.clientY - canvasy;
				}

				function movefun(e) {
					if(offon == true) {
						cxt.beginPath()
						endx = e.clientX - canvasx;
						endy = e.clientY - canvasy;
						cxt.moveTo(startx, starty);
						cxt.lineTo(endx, endy);
						cxt.stroke();

						startx = endx;
						starty = endy;
						console.log("1111");
					}
				}

				function upfun() {
					offon = false;
					cxt.closePath();
				}
				document.getElementById("button").onclick = function() {
					cxt.clearRect(0, 0, canvas.width, canvas.height);
					airboard();
				}
			}
		</script>
	</body>

</html>